import React, { useEffect, useState } from "react";
import "./index.less";
import { NavBar, Tabs, Badge, Toast } from "antd-mobile";
import { useNavigate, useLocation } from "react-router-dom";
import { partyMemberActivities } from "../service";

type serviceListType = {
  id: number;
  name: string;
  url: string;
  img: any;
};
const ActivityOrTraining: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const type = location?.search?.substring(1).split("=")[1]
  const [itemList, setItemList] = useState([])
  const [title, setTitle] = useState("")

  useEffect(() => {
    partyMemberActivities({ villageCode: "511602006004",type:type/* classType:selectType  */ })
      .then((res) => {
        if (res.code == 200) {
          setItemList(res?.data);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  }, [])

  const goto = (url: string) => () => {
    navigate(url);
  }

  useEffect(() => {
    switch (type) {
      case "activity":
        setTitle("党员活动")
        break;
      case "training":
        setTitle("学习培训")
        break;
      default:
        break;
    }
  }, [type])
  return (
    <div className="ActivityOrTraining_contarnier">
      <div className="header-bg">
        <NavBar
          onBack={() => navigate("/smartPartyBuilding")}
        >
          <div className="commontitle">{title}</div>
        </NavBar>
      </div>
      <div className="ActivityOrTraining-content">
        {
          itemList?.map((item, index) => {
            return <div key={index} className="content_Item"
              onClick={goto(`/eventDetails?type=${type}&&detail=${item?.activityId}`)}
            >
              <img
                src={item?.img || "/images/mycommunity/noImage.jpg"} className="cover_img"></img>
              <div className="detail_box">
                <div className="detail_box-top">{item?.activityName}</div>
                <div className="detail_box-bottom">
                  <div className="detail_box-bottom-type">{item?.activityType}</div>
                  {/* <div className="detail_box-bottom-time">{item?.applyStartTime}至{item?.applyStopTime}</div> */}
                  <div className="detail_box-bottom-button"
                  >去报名</div>
                </div>
              </div>
            </div>
          })
        }
      </div>
    </div>
  );
};

export default ActivityOrTraining;
